<template>
  <div id="app">
    <ul>
      <li
        v-for="(item, index) in list"
        :key="item.id"
        @click="countindex = item.id"
      >
        <a :class="{ active: countindex === item.id }" href="#">{{
          item.name
        }}</a>
      </li>
    </ul>
    <div class="apps">
      <component :is="compon"></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, markRaw, ref } from "vue";
import Comapp1 from "./components/Comapp1.vue";
import Comapp2 from "./components/Comapp2.vue";
import Comapp3 from "./components/Comapp3.vue";

let countindex = ref(1);

const list = ref([
  { id: 1, name: "京东秒杀", component: markRaw(Comapp1) },
  { id: 2, name: "每日特价", component: markRaw(Comapp2) },
  { id: 3, name: "品类秒杀", component: markRaw(Comapp3) },
]);

const compon = computed(() => {
  const appInfo = list.value.find((item) => item.id === countindex.value);
  return appInfo ? appInfo.component : null;
});
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  border-bottom: 2px solid #e01222;
  padding: 0 10px;
}
li {
  width: 100px;
  height: 50px;
  line-height: 50px;
  list-style: none;
  text-align: center;
}
li a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  color: #333333;
}
li a.active {
  background-color: #e01222;
  color: #fff;
}
</style>
